<template>
  <div>
    <Headline
      :headline1="$t('m.AccessAdmin') + '  /  '"
      :headline2="$t('m.FireAlarmArea')"
    ></Headline>
    <a-card>
      {{ $t("m.NameOfFireAreaGroup") }}
      <a-select
        v-model="group"
        @change="handleChange"
        :placeholder="$t('m.PleaseSelectGroup')"
        style="width: 150px"
        option-label-prop="label"
      >
        <div slot="dropdownRender" slot-scope="menu">
          <v-nodes :vnodes="menu" />
          <a-divider style="margin: 4px 0" />
          <div
            style="padding: 4px 8px; cursor: pointer"
            @mousedown="(e) => e.preventDefault()"
            @click="addItem"
          >
            <a-icon type="plus" /> {{ $t("m.Add") }}
          </div>
        </div>
        <a-select-option
          class="delete-icon"
          :value="item.id"
          v-for="item in data"
          :key="item.id"
          :label="item.name"
        >
          {{ item.name }}
          <a-icon
            style="position: absolute; top: 30%; right: 10%"
            type="delete"
            @click.stop="deleteItem(item.id)"
          />
        </a-select-option>
      </a-select>
      <a-input-search
        style="width: 200px; margin-right: 20px; margin-left: 20px"
        :placeholder="$t('m.PleaseEnterYourSearchTerms')"
        enter-button
        @search="onSearch"
        v-model="formationA.key"
      />
      <a-button type="primary" icon="plus" @click="areaSetting">{{
        $t("m.PageRange")
      }}</a-button>
      <a-tree

      v-if="flag"
        :auto-expand-parent="autoExpandParent"
        :tree-data="gData"
        :replaceFields="{ children: 'children', title: 'areaname', key: 'id' }"
      />
      <a-empty v-else style="margin-top:40px"/>
    </a-card>
    <a-modal
      :title="$t('m.AddFireAreaGroup')"
      :visible="visible"
      :cancelText="$t('m.Cancel')"
      :okText="$t('m.Ok')"
      @cancel="handleCancel"
      @ok="handleOk"
    >
      <a-input v-model="addGroupName" />
    </a-modal>
    <a-modal
      :title="$t('m.SelectArea')"
      :visible="visibleA"
      :cancelText="$t('m.Cancel')"
      :okText="$t('m.Ok')"
      @cancel="handleCancelA"
      @ok="handleOkA"
    >
      <a-tree
      
        checkable
        :auto-expand-parent="autoExpandParent"
        v-model="checkedKeys"
        :replaceFields="{ children: 'children', title: 'areaname', key: 'id' }"
        :tree-data="treeData"
        @check="onCheck"
      />
    </a-modal>
    <Delete ref="del" :dalete="delItem" @confirm="delitem"></Delete>
  </div>
</template>

<script>
import Headline from "@/components/Headline";
import Delete from "@/components/Delete";
import {
  getFireGroupList,
  delFireGroup,
  saveFireGroup,
  getFireAreaTree,
  getAreaTree,
  saveFireArea,
} from "@/api/entrance/cloudDoor";
export default {
  name: "Firealarmarea",
  components: {
    Headline,
    Delete,
    VNodes: {
      functional: true,
      render: (h, ctx) => ctx.props.vnodes,
    },
  },
  data() {
    return {
      flag:false,
      visibleA: false,
      autoExpandParent: true,
      delItem: {
        titles: this.$t("m.DeleteThePrompt"),
        type: "warning",
        text: this.$t("m.AreYouSureToDeleteThisData"),
      },
      data: [],
      formation: {
        start: 0,
        page: 1,
        limit: 50,
      },
      columns: [
        {
          title: this.$t("m.NameOfFireAreaGroup"),
          dataIndex: "name",
        },
      ],
      group: "",
      delGroupId: "",
      visible: false,
      addGroupName: "",
      formationA: {
        groupId: "",
        key: "",
      },
      gData: [],
      treeData: [],
      checkedKeys: [],
      jsonDatalist: [],
    };
  },
  created() {
    this._getFireGroupList();
  },
  methods: {
    onCheck(checkedKeys, info) {
      this.checkedKeys = checkedKeys;

      console.log(checkedKeys);
      let demo = [];
      checkedKeys.forEach((value, index, array) => {
        demo.push(array[index]);
      });
      demo.forEach((item) => {
        this.jsonDatalist.push(item.toString());
      });
      console.log(this.jsonDatalist);
    },
    areaSetting() {
      if (this.formationA.groupId == "")
        return this.$message.warning("请选择火警区域组");
      this.visibleA = true;
      this._getAreaTree();
    },
    _getAreaTree() {
      getAreaTree({ params: this.formationA }).then((res) => {
        this.treeData = res.data;
      });
    },
    handleOkA() {
      // this.jsonData.forco
      console.log(JSON.parse);
      saveFireArea({
        groupId: this.formationA.groupId,
        jsonData: JSON.stringify(this.jsonDatalist),
      })
        .then((res) => {
          if (res.data.success == true) {
            this.$message.success(res.data.msg);
            this._getFireGroupList();
          } else {
            this.$message.warning(res.data.msg);
          }
        })
        .catch((err) => {
          this.$message.error("操作失败");
        });
      this.visibleA = false;
    },
    handleCancelA() {
      this.visibleA = false;
    },
    onSearch() {
      this._getFireAreaTree();
    },
    _getFireAreaTree() {
      getFireAreaTree({ params: this.formationA }).then((res) => {
        this.gData = res.data;

        if(res.data[0].areaname) {
          this.flag = true;
        }
        // console.log(res.data[0]);
      });
    },
    handleChange(e) {
      this.formationA.groupId = e;
      this._getFireAreaTree();
    },
    handleOk() {
      if (this.addGroupName == "")
        return this.$message.warning("请输入火警区域组名称");
      saveFireGroup({ name: this.addGroupName })
        .then((res) => {
          if (res.data.success == true) {
            this.$message.success(res.data.msg);
            this._getFireGroupList();
          } else {
            this.$message.warning(res.data.msg);
          }

          console.log(res);
        })
        .catch((err) => {
          this.$message.error("操作失败");
        });
      this.visible = false;
    },
    handleCancel() {
      this.visible = false;
    },
    delitem() {
      delFireGroup({ id: this.delGroupId })
        .then((res) => {
          if (res.data.success == true) {
            this.$message.success(res.data.msg);
            this._getFireGroupList();
          } else {
            this.$message.warning(res.data.msg);
          }

          console.log(res);
        })
        .catch((err) => {
          this.$message.error("操作失败");
        });
    },
    addItem() {
      this.visible = true;
    },
    deleteItem(e) {
      this.$refs.del.visible = true;
      this.delGroupId = e;
      console.log(e);
    },
    _getFireGroupList() {
      getFireGroupList({ params: this.formation }).then((res) => {
        this.data = res.data.data;
        console.log(res);
      });
    },
  },
};
</script>

<style>
</style>